<template>
    <div class="content">
        <div class="header_box">
            <div class="header_left">
              私有协议信息
            </div>
            <div class="header_right">
                <el-form :inline="true" :model="searFrom" class="form_box">
                    <el-form-item >
                        <el-input v-model="searFrom.username" placeholder="IP" style="width: 200px" clearable/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="init">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="toInfo">新增</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="toInfo">新增节点</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="toInfo">新增节点组</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="{ background: '#fafbfc', color: '#bbbcc3' }" max-height="500">
            <el-table-column type="index" :index="indexMethod" />
            <el-table-column prop="fullName" label="IP"  />
            <el-table-column prop="code" label="产品名称" />
            <el-table-column prop="code" label="国家" />
            <el-table-column prop="code" label="指纹策略" />
            <el-table-column prop="code" label="指定节点或节点组" />
            <el-table-column prop="code" label="默认价格" />
            <el-table-column prop="code" label="支付流程" />
            <el-table-column label="操作">
            <template #default="{row}">
                <div class="icon_content">
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="编辑"
                    placement="top-start"
                >
                    <div class="icon_box">
                        <el-icon @click="edit(row)" size="20" color="#71778d"><EditPen /></el-icon>
                    </div>
                </el-tooltip>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="删除"
                    placement="top-start"
                >
                    <div class="icon_box_d">
                        <el-icon @click="remove(row)" size="20" color="#71778d"><Remove /></el-icon>
                    </div>
                </el-tooltip>
                    
                    
                </div>
            </template>
            </el-table-column>
        </el-table>
        <div class="page_box">
            <el-pagination
                v-model:current-page="searFrom.pageNo"
                v-model:page-size="searFrom.pageSize"
                :page-sizes="[10, 50, 100, 150]"
                :small="small"
                :disabled="false"
                :background="true"
                layout="sizes, prev, pager, next"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>
<script setup>
import {defineOptions,ref,onBeforeMount} from 'vue'
import * as userApi from "../../api/user/user.js";
import { ElMessage } from "element-plus";
import {useRouter} from 'vue-router'
defineOptions({name: 'UserList'})

let tableData = ref([{username: 'dayu',fullName: 'jw',email: '2045279876@qq.com',phone: '18946873767',birthDate: '2021-01-05 9:00:00',address: '深圳市宝安区',createdAt: '2021-01-05 9:00:00'}])

let searFrom = ref({
    username: '',
    email: '',
    password: '',
    fullName: '',
    birthDate: null,
    gender: '',
    address: '',
    phone: '',
    openId: '',
    isActive: 1,
    userRole: '',
    pageNo: 1,
    pageSize: 10
})

let total = ref(0)


let roleLabels = ref({
                0: '后台超级管理员',
                1: '后台管理员',
                2: '后台用户',
                3: '小程序用户'
            })

const router = new useRouter()

const init = async()=>{
    const res = await userApi.page(searFrom.value);
    const { records } = res;
    tableData.value = records;
    total.value = res.total
}
const change = async (e)=>{
    // const res = await userApi.saveOrUpate(e);
    // const { code ,msg } = res;
    // if(code !== '200'){
    //     ElMessage.error(msg)
    //     return
    // }
    // ElMessage.success('操作成功')
}

const toInfo = () => {
    router.push({
        name: 'userInfo'
    })
}

onBeforeMount(()=>{
//  init()
})
</script>
<style lang="less" scoped>
    .header_left{
        border-radius: 15px 0px 0px 0px;
        font-weight: 800;
    }
    .header_right{
        background-color: #ffffff;
        justify-content: flex-end;
        border-radius: 0px 15px 0px 0px;
    }
    :deep(.form_box ){
        width: 80%;
        height: 40%;
        margin: 0px;
        display: flex;
        justify-content: flex-end;
    }
</style>